<!--
 * @Author: zxc
 * @Date: 2020-09-15 07:15:40
 * @LastEditTime: 2020-09-15 16:18:16
 * @LastEditors: zxc
 * @Description:
-->
<template>
  <div>
    <list :list="list" :style="{color: 'red'}" :render="renderFunc">
      <!-- <count-to slot="aa" slot-scope="count" :end-val="count.number"></count-to> -->
    </list>
  </div>
</template>
<script>
import List from '_c/list'
import CountTo from '_c/count-to'
export default {
  data () {
    return {
      list: [{ number: 100 }, { number: 45 }]
    }
  },
  components: {
    List,
    // eslint-disable-next-line vue/no-unused-components
    CountTo
  },
  methods: {
    renderFunc (h, number) {
      return (
        <CountTo
          nativeOn-click={this.handleClick}
          on-on-animation-end={this.handleEnd}
          endVal={number}
          style={{ color: 'pink' }}
        ></CountTo>
      )
    },
    handleClick (event) {
      console.log(event)
    },
    handleEnd () {
      console.log('end!')
    }
  }
}
</script>
